<template>
  <div class="app_container">
    <h3 class="module_head">充值记录查询-管理者</h3>
    <div class="filter-container" style="margin: 0 auto 20px 0;">
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        style="margin-right: 10px; width: 300px"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-input placeholder="卡号" class="filter-item"></el-input>
      <el-input placeholder="人员姓名" class="filter-item"></el-input>
      <el-input placeholder="部门id" class="filter-item"></el-input>
      <el-select
        placeholder="操作类型"
        class="filter-item"
        v-model="value"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search">
        筛选
      </el-button>
    </div>
    <el-table
      :data="recordTableData"
      border
      fit
      highlight-current-row
      height="350"
      :default-sort = "{prop: 'createTime', order: 'descending'}"
      class="record_table">
      <el-table-column
        prop="createTime"
        label="操作时间"
        sortable
        min-width="160">
      </el-table-column>
      <el-table-column
        prop="createBy"
        label="操作人">
      </el-table-column>
      <el-table-column
        prop="cardNumber"
        label="卡号"
        sortable>
      </el-table-column>
      <el-table-column
        prop="personName"
        label="人员姓名">
      </el-table-column>
      <el-table-column
        prop="deptName"
        label="部门名称">
      </el-table-column>
      <el-table-column
        prop="deptId"
        label="部门id">
      </el-table-column>
      <el-table-column
        prop="cashType"
        label="交易类型">
      </el-table-column>
      <el-table-column
        prop="preBalance"
        label="操作前金额">
      </el-table-column>
      <el-table-column
        prop="cash"
        label="充值金额"
        sortable>
      </el-table-column>
      <el-table-column
        prop="balance"
        label="余额">
      </el-table-column>
      <el-table-column
        prop="eventType"
        label="事件类型">
      </el-table-column>
      <el-table-column
        prop="description"
        label="备注">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'AdministerCardCashRecord',
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  data(){
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      options: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '现金充值',
          label: '现金充值'
        },
        {
          value: '现金退款',
          label: '现金退款'
        },
        {
          value: '补贴充值',
          label: '补贴充值'
        },
        {
          value: '补贴退款',
          label: '补贴退款'
        },
        {
          value: '开户充值',
          label: '开户充值'
        },
          {
          value: '充值机充值',
          label: '充值机充值'
        },
        {
          value: '多扣补款',
          label: '多扣补款'
        },
        {
          value: '离职退款',
          label: '离职退款'
        },
        {
          value: '少扣退款',
          label: '少扣退款'
        },
        {
          value: '其他充值',
          label: '其他充值'
        }
      ],
      value: undefined,
      currentPage: 4,
      recordTableData: [
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 100,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 109,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-14 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 410,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-15 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 310,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-16 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 70,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-17 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 40,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-18 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 101,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-19 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 180,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-20 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 121,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-04-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 111,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-05-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 500,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-06-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 10,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-07-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 40,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-08-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 50,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-09-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 20,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-10-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 10,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-11-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 107,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-12-13 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 130,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-08-15 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 110,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-08-25 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        },
        {
          balance: 60,
          cardNumber: "34343445",
          serialNum: 2112547542875,
          cash: 100,
          cashType: "现金",
          createBy: "system",
          createTime: "2017-03-30 23:59:55",
          deptName: "人力",
          deptId: 1,
          description: '',
          eventType: "现金退款",
          id: 3,
          personId: 2,
          personName: "张三",
          preBalance: 50,
        }
      ],
    };
  }
}
</script>

<style scoped>
.app_container{
  padding: 20px;
}
.module_head{
  margin-top: 0;
}
.filter-item{
  margin-right: 10px;
  width: 130px
}
.record_table{
  width: 100%;
  margin-bottom: 20px;
}
</style>
